<template>
  <Form ref="refForm" :model="addForm" :rules="rulesAddForm" :label-width="110">
    <FormItem label="所属客户:" prop="companyId">
      <Select :disabled="isEdit" v-model="addForm.companyId" @on-change="_companyChange">
        <Option v-for="item in companyList" :value="item.id" :key="item.value" :label="item.name"></Option>
      </Select>
    </FormItem>
    <FormItem label="所属区域:" prop="groupId">
      <Select v-model="addForm.groupId">
        <Option v-for="item in groupList" :value="item.id" :key="item.value" :label="item.name"></Option>
      </Select>
    </FormItem>
    <FormItem label="设备名称:" prop="deviceName">
      <Input v-model.trim="addForm.deviceName" placeholder="请输入设备名称..."></Input>
    </FormItem>
    <FormItem label="设备别名:" prop="deviceAlias">
      <Input v-model.trim="addForm.deviceAlias" placeholder="请输入设备别名..."></Input>
    </FormItem>
    <FormItem label="设备类型：" prop="deviceType">
      <Select :disabled="isEdit" v-model="addForm.deviceType">
        <Option v-for="item in deviceTypeList" :value="item.id" :key="item.value" :label="item.typeName"></Option>
      </Select>
    </FormItem>
    <FormItem label="设备位置:" prop="location">
      <Input v-model.trim="addForm.location" placeholder="请输入设备位置..."></Input>
    </FormItem>
    <FormItem label="IMEI:" prop="imei">
      <Input :disabled="isEdit" v-model.trim="addForm.imei" placeholder="请输入IMEI..."></Input>
    </FormItem>
    <FormItem label="IMSI:" prop="imsi">
      <Input :disabled="isEdit" v-model.trim="addForm.imsi" placeholder="请输入IMSI..."></Input>
    </FormItem>
    <FormItem label="设备ID:" prop="deviceId">
      <Input :disabled="isEdit" v-model.trim="addForm.deviceId" placeholder="请输入设备ID..."></Input>
    </FormItem>
    <FormItem label="ONENETID:" prop="onetId">
      <Input v-model.trim="addForm.onetId" placeholder="请输入ONENETID..."></Input>
    </FormItem>
    <FormItem label="是否启用:" prop="enableState">
      <i-switch v-model="addForm.enableState">
        <span slot="open">On</span>
        <span slot="close">Off</span>
      </i-switch>
    </FormItem>
  </Form>
</template>
<script>
import { addForm, rulesAddForm } from "../materials";
import {
  getCompanyListOnOd,
  getGroupList,
  postOd,
  getOdt,
  putOdInfo
} from "@/api";
export default {
  props: {
    row: Object,
    isEdit: {
      type: Boolean,
      default: false
    }
  },

  mounted() {
    this.getCompanyLists();
    this.getDeviceTypeList();
    if (this.isEdit) {
      this.initEditData();
    }
  },

  data() {
    return {
      companyList: [],
      groupList: [],
      deviceTypeList: [],
      addForm: { ...addForm },
      rulesAddForm: { ...rulesAddForm }
    };
  },

  methods: {
    // 加载编辑信息
    initEditData() {
      const vm = this;
      const row = vm.row;
      const { companyId } = row;
      vm._getGroupList(companyId);
      vm.addForm = {
        ...row
      };
    },

    // 获取企业列表
    async getCompanyLists() {
      let that = this;
      let params = {
        page: 1,
        size: 100000,
        thermalImage: 1
      };
      await getCompanyListOnOd().then(res => {
        if (res.code == 200) {
          that.companyList = res.data;
        }
      });
    },

    // 获取设备类型列表
    getDeviceTypeList() {
      getOdt().then(res => {
        this.deviceTypeList = res.data;
      });
    },

    // 企业变更
    _companyChange(id) {
      this.addForm.groupId = "";
      this._getGroupList(id);
    },

    // 获取企业下/区域列表
    _getGroupList(id) {
      let that = this;
      let params = {
        companyId: id
      };
      getGroupList(params).then(res => {
        if (res.code == 200) {
          that.groupList = res.data.list;
        }
      });
    },

    isValidate() {
      const vm = this;
      const isEdit = vm.isEdit;
      vm.$refs.refForm.validate(valid => {
        if (valid) {
          if (isEdit) {
            vm.editSave();
          } else {
            vm.addNewSave();
          }
        }
      });
    },

    // 新建提交
    addNewSave() {
      const vm = this;
      let params = {
        ...vm.addForm
      };
      vm.$emit("btnDisable", true);
      postOd(params).then(res => {
        if (res.code == 200) {
          vm.$Message.success("操作成功");
          vm.$emit("btnDisable", false);
          vm.$emit("save");
        } else {
          this.$Message.error(res.message);
          vm.$emit("btnDisable", false);
        }
      });
    },

    // 保存
    editSave() {
      const vm = this;
      let params = {
        ...vm.addForm
      };
      vm.$emit("btnDisable", true);
      putOdInfo(params).then(res => {
        if (res.code === 200) {
          vm.$Message.success("操作成功");
          vm.$emit("btnDisable", false);
          vm.$emit("save");
        } else {
          this.$Message.error(res.message);
          vm.$emit("btnDisable", false);
        }
      });
    }
  }
};
</script>
